<template>
    <div  v-show='false'>
       <div class="row" id="pdfDom1" ref="pdfDom1" style="width:100%;padding: 56px;background-color:#fff;box-sizing: border-box">
           <div v-for="(item,index) in getPaymentSettlement.arrayList" :key="index">
            <div class="pdfTitle1" v-if="index===0">成都市佳颖医用制品有限公司</div>
            <div class="pdfTitle"  v-if="index===0">商品物资付款结算（申请）单</div>
            <div v-if="getPaymentSettlement.cgTaskDetails" class="pdfContent">
                <el-row v-if="index===0">
                        <el-col :span="6" >
                        部门：生产保障部
                    </el-col>
                    <el-col :span="6">
                        {{getPaymentSettlement.year}} 年  {{getPaymentSettlement.month}}  月 {{getPaymentSettlement.Date}}    日
                    </el-col>
                    <el-col :span="6">
                        附单据 {{getPaymentSettlement.arrayList.length}}张
                    </el-col>
                    <el-col :span="6">
                        单位：元
                    </el-col>
                </el-row>
                <div >
                    <table border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" class="myTable">
                            <tr>
                                <th>购入项目</th>
                                <th>单价（元）</th>
                                <th>数量</th>
                                <th>总金额（元）</th>
                                <th colspan="2">付款方式</th>
                                <th colspan="2">付款性质</th>
                            </tr>
                            <tr v-for="val in item" :key="val.id">
                                <td v-text="val.bomNameName"></td>
                                <td v-text="val.price"></td>
                                <td v-text="val.nums"></td>
                                <td v-text="val.total"></td>
                                <td v-text="val.payWayName" width="50"></td>
                                <td width="50"></td>
                                <td v-text="val.payTypeName" width="60"></td>
                                <td width="50"></td>
                            </tr>
                            <tr v-if="index===(getPaymentSettlement.arrayList.length-1)">
                                <td colspan="3">本次支付金额：￥{{getPaymentSettlement.total}}</td>
                                <td colspan="5">大写人民币：{{getPaymentSettlement.atotal}}</td>
                            </tr>
                        </table>
                </div>
                    <el-row style="margin-top:24px;" v-if="index===(getPaymentSettlement.arrayList.length-1)">
                        <el-col :span="24" >
                        供应商名称：{{getPaymentSettlement.cgSupplier.name}}
                        </el-col>
                    <el-col :span="24">
                        开户行：{{getPaymentSettlement.cgSupplier.openingBank}}
                    </el-col>
                    <el-col :span="24">
                        开户名称：{{getPaymentSettlement.cgSupplier.name}}
                    </el-col>
                    <el-col :span="24">
                        银行账号：{{getPaymentSettlement.cgSupplier.account}}
                    </el-col>
                    <el-col :span="12">
                        发票种类：{{getPaymentSettlement.cgSupplier.makeInvoiceTypeName}}
                    </el-col>
                    <el-col :span="12">
                        本次最迟付款时间：{{getPaymentSettlement.latePayDate}}
                    </el-col>
                </el-row>
                <el-row style="margin-top:24px;" v-if="index===(getPaymentSettlement.arrayList.length-1)">
                        <el-col :span="6" >
                        经办人：
                    </el-col>
                    <el-col :span="6">
                        部门经理：
                    </el-col>
                    <el-col :span="6">
                        会计主管：
                    </el-col>
                    <el-col :span="6">
                        总经理：
                    </el-col>
                </el-row>
            </div>
                <div class="pagination">
                    <div>第{{index+1}}页/共{{getPaymentSettlement.arrayList.length}}页</div>
                    <div class="always"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    name:'orderNotice',
    props:{
        pid:{
            type:String,
            default:''
        }
    },
    data(){
        return {
           getPaymentSettlement:{},
        }
    },
    methods:{
        getCgPdfData(id){
            let self = this;
            let nowDate = new Date();
            cgbHttp.getPaymentSettlement(id).then(res=>{
                self.getPaymentSettlement=res.content;
                self.getPaymentSettlement.year =  nowDate.getFullYear();
                self.getPaymentSettlement.month= (nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1);
                self.getPaymentSettlement.Date=(nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate());
                if(res.content.cgTaskDetails.length>3){
                    res.content.cgTaskDetails.forEach((element,index) => {
                        switch(index){
                            case 0:
                                element.payWayName='支票';
                                element.payTypeName="预付货款";

                                break;
                             case 1:
                                 element.payWayName='现金';
                                element.payTypeName="原欠货款";
                                break;
                             case 2:
                                  element.payWayName='电汇';
                                element.payTypeName="到货付款";
                                break;
                            default:
                                 element.payWayName='';
                                element.payTypeName="";
                                break;
                        }
                    });
                }else{
                    for(let i =0;i<3;i++){
                       if(i > res.content.cgTaskDetails.length-1){
                           res.content.cgTaskDetails.push({bomNameName:'',price:'',nums:'',total:''})
                       }
                       switch(i){
                            case 0:
                                res.content.cgTaskDetails[i].payWayName='支票';
                                res.content.cgTaskDetails[i].payTypeName="预付货款";
                                break;
                             case 1:
                                res.content.cgTaskDetails[i].payWayName='现金';
                                res.content.cgTaskDetails[i].payTypeName="原欠货款";
                                break;
                             case 2:
                                res.content.cgTaskDetails[i].payWayName='电汇';
                                res.content.cgTaskDetails[i].payTypeName="到货付款";
                                break;
                            default:
                                res.content.cgTaskDetails[i].payWayName='';
                                res.content.cgTaskDetails[i].payTypeName="";
                                break;
                       }
                    }
                }
                self.getPaymentSettlement.arrayList=self.alterData(res.content.cgTaskDetails,36)
                setTimeout(()=>{
                    self.$print(self.$refs.pdfDom1);
                },300)
            })
        },
         alterData(arr, n) {
            //重构data数据（数组一维变二维）
            let self = this,
                Arr = arr != null ? arr : [],
                len = Arr.length,
                lineNum = (lineNum =
                    len % n === 0 ? len / n : Math.floor(len / n + 1)),
                res = [];
            for (let i = 0; i < lineNum; i++) {
                let temp = Arr.slice(i * n, i * n + n);
                res.push(temp);
            }
            return res;
        }

    }
}
</script>
<style scoped>
.page{
    padding:56px 0;
    position: relative;
}
.pdfTitle1{
    text-align: center;
    color:#000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom:10px;
}

.pdfTitle{
    text-align: center;
    color:#000;
    font-size: 20px;
}
.pdfContent{
    font-size: 16px;
    line-height: 2;
    color: #000;
    margin-top:36px;
}
.myTable{
    width: 100%;
    text-align: center;
    border-collapse:collapse;
    line-height: 1.6;
    font-size: 14px;
}
.pagination{
    color:#666;
    font-size: 12px;
    text-align: center;
}
</style>
<style type="text/css" media="print">
@page {
    size: auto;
    margin: 0mm;
}
.always {
    page-break-after: always;
}
</style>
